<template>
  <view class="message-body">
    <view class="message-picker">
      <picker-view
        indicator-style="height: 45px;"
        indicator-class="clearBorder"
        class="picker-style"
        :value="timeIndex"
        @change="changeElec"
        @pickstart="pickstart"
        @pickend="pickend"
      >
        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex[0] }"
            v-for="(item, index) in startTimeHour"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <view class="messages-tips">:</view>

        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex[1] }"
            v-for="(item, index) in startTimeMin"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
    <view class="text-tips"></view>
    <view class="message-picker">
      <picker-view
        indicator-style="height: 45px;"
        indicator-class="clearBorder"
        class="picker-style"
        :value="timeIndex2"
        @change="changeElec2"
        @pickstart="pickstart"
        @pickend="pickend"
      >
        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex2[0] }"
            v-for="(item, index) in endTimeHour"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <view class="messages-tips">:</view>
        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex2[1] }"
            v-for="(item, index) in endTimeMin"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
      <view v-if="isTomorrow" class="ends-text">次日</view>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  show: boolean
  startTimeHour: string[]
  startTimeMin: string[]
  endTimeHour: string[]
  endTimeMin: string[]
  curStartHour?: string
  curStartMin?: string
  curEndHour?: string
  curEndMinute?: string
  isTomorrow?: boolean
}>()
let startHour = '23'
let startMinute = '00'
let endHour = '07'
let endMinute = '00'
const emit = defineEmits<{
  (e: 'timechange', start: string, end: string): void
  (e: 'isPicking', value: boolean): void
}>()
const timeIndex = ref([0, 0])
const timeIndex2 = ref([0, 0])

watch(
  () => props.show,
  () => {
    initSetting()
  }
)
// 重新挂载时 重置吸顶状态
onBeforeMount(() => {
  initSetting()
})

function changeElec(e: WechatMiniprogram.PickerViewChange) {
  timeIndex.value = e.detail.value
  startHour = props.startTimeHour[e.detail.value[0]].replace(/\s+/g, '')
  startMinute = props.startTimeMin[e.detail.value[1]].replace(/\s+/g, '')
  emit('timechange', startHour + ':' + startMinute, endHour + ':' + endMinute)
}
function changeElec2(e: WechatMiniprogram.PickerViewChange) {
  timeIndex2.value = e.detail.value
  endHour = props.endTimeHour[e.detail.value[0]].replace(/\s+/g, '')
  endMinute = props.endTimeMin[e.detail.value[1]].replace(/\s+/g, '')
  emit('timechange', startHour + ':' + startMinute, endHour + ':' + endMinute)
}
function initSetting() {
  startHour = props.curStartHour
  startMinute = props.curStartMin
  endHour = props.curEndHour
  endMinute = props.curEndMinute

  let newTimeIndex = [0, 0]
  let endiTimeIndex = [0, 0]
  nextTick(() => {
    timeIndex.value = newTimeIndex
    timeIndex2.value = endiTimeIndex
  })

  for (let i = 0; i < props.startTimeHour.length; i++) {
    if (props.startTimeHour[i].replace(/\s+/g, '') == props.curStartHour.replace(/\s+/g, '')) {
      newTimeIndex[0] = i
      break
    }
  }
  for (let j = 0; j < props.startTimeHour.length; j++) {
    if (props.startTimeHour[j].replace(/\s+/g, '') == props.curStartMin.replace(/\s+/g, '')) {
      newTimeIndex[1] = j
      break
    }
  }

  for (let i = 0; i < props.endTimeHour.length; i++) {
    if (props.endTimeHour[i].replace(/\s+/g, '') == props.curEndHour.replace(/\s+/g, '')) {
      endiTimeIndex[0] = i
      break
    }
  }
  for (let j = 0; j < props.endTimeMin.length; j++) {
    if (props.endTimeMin[j].replace(/\s+/g, '') == props.curEndMinute.replace(/\s+/g, '')) {
      endiTimeIndex[1] = j
      break
    }
  }
  nextTick(() => {
    timeIndex.value = newTimeIndex
    timeIndex2.value = endiTimeIndex
  })
}
// 滑动状态
function pickstart() {
  emit('isPicking', true)
}
function pickend() {
  emit('isPicking', false)
}
</script>
<style lang="less">
.message-body {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 24rpx;
  .message-picker {
    display: flex;
    position: relative;
    width: 100%;
    height: 216rpx;
    text-align: center;
    z-index: 9;
    box-sizing: border-box;
    justify-content: center;
    .picker-style {
      width: 55%;
      height: 216rpx;
      text-align: center;
      font-size: 40rpx;
      color: #131b35;
      line-height: 45px;
      .picker2 {
        font-size: 48rpx;
        width: auto;
      }
    }
  }
  .active {
    font-weight: 500;
    font-size: 24px;
    color: var(--primary-color);
  }
  .messages-tips {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    margin: 0 32rpx;
  }
  .text-tips {
    width: 70rpx;
    height: 4rpx;
    background-color: rgba(64, 141, 242, 1);
    margin-left: -24rpx;
  }
  .ends-text {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 22rpx;
    padding-top: 9rpx;
    margin-left: 24rpx;
  }
}
</style>
